<template>
	<view class="container">
		<view class="head-box">
			<view class="head1">
				<view class="head1-left" @click.stop="pre">
					上一个月
				</view>
				<picker mode="date" :value="date" fields="month" @change="bindDateChange">
					<text class="head1-text">{{ (nowDate.year||'') +'年'+( nowDate.month||'')+'月'}}</text>
				</picker>
				<view class="head1-right" @click.stop="next">
					下一个月
				</view>
			</view>
		</view>
		<view class="settlement-box one">
			<view class="settlement-item">
				<view class="settlement-item-label">
					代招人数
				</view>
				<view class="settlement-item-value">
					123人
				</view>
			</view>
			<view class="settlement-item">
				<view class="settlement-item-label settlement-item-label2">
					代招奖励
				</view>
				<view class="settlement-item-value">
					123456.00元
				</view>
			</view>
			<view class="settlement-item">
				<view class="settlement-item-label">
					派遣人数
				</view>
				<view class="settlement-item-value">
					123人
				</view>
			</view>
			<view class="settlement-item">
				<view class="settlement-item-label">
					被推荐人奖励人数
				</view>
				<view class="settlement-item-value">
					12人
				</view>
			</view>
			<view class="settlement-item">
				<view class="settlement-item-label settlement-item-label2">
					奖励金额
				</view>
				<view class="settlement-item-value">
					123456.00元
				</view>
			</view>
			<view class="settlement-item">
				<view class="settlement-item-label">
					合作中介公司数
				</view>
				<view class="settlement-item-value">
					50家 
				</view>
			</view>
		</view>
		
		<view class="settlement-box">
			<view class="settlement-item">
				<view class="settlement-item-label3">
					工资
				</view>
			</view>
			<view class="settlement-item">
				<view class="settlement-item-label">
					正式工人数
				</view>
				<view class="settlement-item-value">
					123人
				</view>
			</view>
			<view class="settlement-item">
				<view class="settlement-item-label settlement-item-label2">
					总工资
				</view>
				<view class="settlement-item-value">
					123456.00元
				</view>
			</view>
			<view class="settlement-item">
				<view class="settlement-item-label">
					派遣工人数
				</view>
				<view class="settlement-item-value">
					123人
				</view>
			</view>
			<view class="settlement-item">
				<view class="settlement-item-label settlement-item-label2">
					总工资
				</view>
				<view class="settlement-item-value">
					123456.00元
				</view>
			</view>
			<view class="settlement-item">
				<view class="settlement-item-label">
					小时工人数
				</view>
				<view class="settlement-item-value">
					12人
				</view>
			</view>
			<view class="settlement-item">
				<view class="settlement-item-label settlement-item-label2">
					总工资
				</view>
				<view class="settlement-item-value">
					123456.00元
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Calendar from '../components/m-calendar/util.js';
	import mEmptyData from '@/components/m-empty-data/m-empty-data.vue';
	import {
		getDate
	} from "../utils/date.js"
	export default {
		components: {
			mEmptyData
		},
		data() {
			return {
				isReach: false,
				inputValue: '',
				searchFocus: false,
				tabs: [{
					value: 0,
					label: '待结算的'
				}, {
					value: 1,
					label: '已结算的'
				}],
				pageData: {
					pageNum: 1,
					count: 10,
					keyWord: ''
				},
				curTab: 0,
				pageList: [{}, {}],
				// 分页
				status: 'loading',
				contentText: {
					contentdown: '查看更多',
					contentrefresh: '正在加载',
					contentnomore: '没有更多了'
				},
				// 日期
				date: '',
				weeks: [],
				calendar: {},
				nowDate: '',
				stagingImg: this.$mAssetsPath.staging
			};
		},
		watch: {
			isReach(val) {
				this.searchFocus = val;
			}
		},
		onLoad() {
			this.date = getDate(new Date(), 0).fullDate;
			// 获取日历方法实例
			this.cale = new Calendar({
				date: this.date,
				selected: [],
				startDate: '',
				endDate: '',
				range: false,
			});
			this.init(this.date)
		},
		methods: {
			/**
			 * 初始化日期显示
			 * @param {Object} date
			 */
			init(date) {
				this.cale.setDate(date)
				this.weeks = this.cale.weeks
				this.nowDate = this.calendar = this.cale.getInfo(date)
			},
			// 上个月
			pre() {
				const preDate = this.cale.getDate(this.nowDate.fullDate, -1, 'month').fullDate
				this.setDate(preDate)
			},
			// 下个月
			next() {
				const nextDate = this.cale.getDate(this.nowDate.fullDate, +1, 'month').fullDate
				this.setDate(nextDate)
			},
			bindDateChange(e) {
				const value = e.detail.value + '-1'
				console.log(this.cale.getDate(value), 23);
				this.init(value)
			},
			/**
			 * 设置日期
			 * @param {Object} date
			 */
			setDate(date) {
				this.cale.setDate(date)
				this.weeks = this.cale.weeks
				this.nowDate = this.cale.getInfo(date)
			},

			// 刷新
			initData() {
				uni.showLoading({
					title: "加载中……",
				})

				// tHouseholdListApi(this.pageData).then(res => {
				// 	uni.stopPullDownRefresh()
				// 	uni.hideLoading()
				// 	if (res.code == 200) {
				// 		this.pageList = res.data.list;
				// 		if (this.pageList.length >= res.data.total) {
				// 			this.status = 'nomore';
				// 		}
				// 		this.pageList = this.pageList.map(ele => {
				// 			return {
				// 				...ele
				// 			}
				// 		})
				// 	}
				// }).catch(() => {
				// 	uni.hideLoading()
				// 	uni.stopPullDownRefresh()
				// })
			}

		}

	}
</script>

<style lang="scss" scoped>
	@import '@/static/style/commonClass.scss';
	page{
	}
	.container {
		background-color: #F3F5FA;
		min-height: 100vh;
		.head1 {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-bottom: 39rpx;
			padding-top: 21rpx;
			background: #fff;

			.head1-left {
				width: 159rpx;
				height: 64rpx;
				background: #FFAE13;
				border-radius: 0rpx 10rpx 10rpx 0rpx;
				font-weight: 500;
				font-size: 30rpx;
				color: #FFFFFF;
				text-align: center;
				line-height: 64rpx;
			}

			.head1-text {
				font-weight: bold;
				font-size: 32rpx;
				color: #222222;
			}

			.head1-right {
				width: 162rpx;
				height: 64rpx;
				background: #3A92FF;
				border-radius: 10rpx 0rpx 0rpx 10rpx;
				font-weight: 500;
				font-size: 30rpx;
				color: #FFFFFF;
				text-align: center;
				line-height: 64rpx;
			}
		}
		
		.settlement-box {
			background: #FFFFFF;
			border-radius: 10rpx;
			padding: 39rpx 38rpx 49rpx 38rpx;
		    margin: 20rpx 20rpx 0 20rpx;
			.settlement-item {
				@extend .flex;
				@extend .align-center;
				@extend .justify-between;
				margin-bottom: 30rpx;

				.settlement-item-label {
					font-weight: 500;
					font-size: 28rpx;
					color: #666666;
				}
				.settlement-item-label2 {
					color: #222222;
				}
				.settlement-item-label3{
					font-weight: bold;
					font-size: 32rpx;
					color: #222222;
				}
				.settlement-item-value {
					font-weight: 500;
					font-size: 28rpx;
					color: #222222;
					text-align: right;
				}

				&:last-child {
					margin-bottom: 0;
				}
			}
		}
		.one{
			margin-top: 25rpx;
		}
	}
</style>